<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        function index() {
            var obj = document.createElement('li');//创建一个新标签
            //向新标签中添加文本节点
            // obj.innerText='5'
            obj.id = 'nihao'  //为新标签设置属性
            var txt = document.createTextNode('5');//创建一个文本节点
            obj.appendChild(txt);

            $('myul').appendChild(obj);

            //添加到指定节点的前面（insertBefore）
            var x = document.createElement("li");
            x.innerText = '1.5'
            $('myul').insertBefore(x, $('l2'));

            //替换指定的节点(replaceChild)
            let s = document.createElement('li')
            s.innerText = '0.5'
            $('myul').replaceChild(s, $('l1'))


            //删除当前节点的子节点(removeChild()
            //$('myul').removeChild($('l3'))

            //删除当前节点（remove()）
            $('l3').remove()
        }
    </script>
</head>

<body>
    <button onclick="index();">点我试试</button>
    <hr>
    <br>
    <br>
    <br>
    <ul id='myul'>
        <li id="l1">1</li>
        <li id="l2">2</li>
        <li id="l3">3</li>
        <li>4</li>
    </ul>
</body>

</html>